<script setup lang="ts">
import { queryStaffList } from '@/api';
import EmptyOperate from '@/components/empty-operate/index.vue';
// import Search from './search.vue';
import FlexWrap from '@/components/flex-wrap/index.vue';
import PageStatus from '@/components/page-status/index.vue';
import RouterJump from '@/components/router-jump/index.vue';
import type { ListItem } from '@/types';
import { onMounted, ref } from 'vue';
import CardItem from './card.vue';

const list = ref<ListItem[]>([]);
const loading = ref(true);

onMounted(() => {
	queryStaffList().then((res) => {
		list.value = res.Data?.StaffList || [];
	}).finally(() => {
		loading.value = false;
	});
});

</script>

<template>
	<PageStatus :loading="loading" :empty="!list.length">
		<template #empty>
			<EmptyOperate>
				<RouterJump to="/personnel/worker/add" text="添加职工"></RouterJump>
			</EmptyOperate>
		</template>
		<!-- <Search /> -->
		<RouterJump type="primary" to="/personnel/worker/add" text="添加职工"></RouterJump>
		<FlexWrap>
			<CardItem v-for="(item, index) in list" :item="item" :key="index"></CardItem>
		</FlexWrap>
	</PageStatus>
</template>
<style scoped></style>
